<template>
  <div class="tabs-box">
    <div class="tabs-menu">
      <el-tabs
        v-model="tabsMenuValue"
        type="card"
        @tab-click="tabClick"
        @tab-remove="tabRemove"
      >
        <el-tab-pane
          v-for="item in tabsMenuList"
          :key="item.path"
          :label="item.title"
          :name="item.path"
          :closable="!item.affixInTabs"
          :draggable="false"
        >
          <template #label>
            <el-icon
              class="tabs-icon"
              v-if="item.icon && layoutConfig.showTabsIcon"
            >
              <component :is="item.icon"></component>
            </el-icon>
            {{ $t(item.title) }}
          </template>
        </el-tab-pane>
      </el-tabs>
      <MoreButton />
    </div>
  </div>
  <!-- <div class="fix-tabs-position"></div> -->
</template>

<script setup lang="ts">
import { useAppConfigUserStore } from '@/stores'
import { useTabsStore, useAuthMenuAndButtonStore } from '@/stores'
import type { TabsPaneContext } from 'element-plus'
import MoreButton from './moreButton.vue'
import { listenerRouteChange } from '@/utils/route-listener'
import type { RouteLocationNormalized } from 'vue-router'
import Sortable from 'sortablejs'
const route = useRoute()
const router = useRouter()
const tabsStore = useTabsStore()
const authStore = useAuthMenuAndButtonStore()
const { layoutConfig } = storeToRefs(useAppConfigUserStore())
const tabsMenuValue = ref(route.path)
const tabsMenuList = computed(() => tabsStore.tabsMenuList)

listenerRouteChange((route: RouteLocationNormalized) => {
  if (route.meta.isHide) return
  tabsMenuValue.value = route.path
  const tabsParams = {
    icon: route.meta.icon,
    title: route.meta.title,
    path: route.path,
    affixInTabs: route.meta.affixInTabs
  }
  tabsStore.addTabs(tabsParams)
}, true)

onMounted(() => {
  tabsDrop()
  initTabs()
})

// 标签拖拽排序
const tabsDrop = () => {
  Sortable.create(document.querySelector('.el-tabs__nav') as HTMLElement, {
    draggable: '.el-tabs__item',
    animation: 300
  })
}

// 初始化需要固定的标签
const initTabs = () => {
  authStore.flatRouteListGet.forEach(item => {
    if (item.meta.affixInTabs && !item.meta.isHide && !item.meta.isFull) {
      const tabsParams = {
        icon: item.meta.icon,
        title: item.meta.title,
        path: item.path,
        affixInTabs: item.meta.affixInTabs
      }
      tabsStore.addTabs(tabsParams)
    }
  })
}
// Tab Click
const tabClick = (tabItem: TabsPaneContext) => {
  let path = tabItem.props.name as string
  router.push(path)
}

// Remove Tab
const tabRemove = (activeTabPath: string) => {
  tabsStore.removeTabs(activeTabPath, activeTabPath == route.path)
}
</script>

<style scoped lang="scss">
.ghost {
  border: solid 1px rgb(19, 41, 239);
}
.chosenClass {
  background-color: #f1f1f1;
}

.tabs-box {
  background-color: var(--el-bg-color);
  :deep(.tabs-menu) {
    position: relative;
    width: 100%;

    .tabs-icon {
      top: 2px;
      font-size: 15px;
    }
    .el-tabs__nav-wrap {
      position: absolute;
      width: calc(100% - 110px);
    }
    .el-tabs--card > .el-tabs__header {
      box-sizing: border-box;
      height: 40px;
      padding: 0 10px;
      margin: 0;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__nav {
      border: none;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item {
      color: #cccccc;
      border: none;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
      color: var(--el-color-primary);
      border-bottom: 2px solid var(--el-color-primary);
    }
    .el-tabs__item .is-icon-close svg {
      margin-top: 0.5px;
    }
  }
}
</style>
